<template>
  <!-- 隔离人员汇总 -->
  <view class="sample">
    <!-- 图表 -->
    <view v-if="info && !showEmpty" class="chart">
      <text>个数（个）</text>
      <qiun-data-charts :opts="config" type="column" :chartData="chartData" :errorShow="false" :canvas2d="true" background="none" :tooltipShow="false" :tapLegend="false" />
    </view>
    <!-- 汇总 -->
    <view v-if="info && !showEmpty" class="card collect">
      <view class="hd">
        <text class="grey block">总采样数</text>
        <text>{{ info.totalSample }}</text>
      </view>
      <view class="hd">
        <text class="grey block">总收样数</text>
        <text>{{ info.totalCollect }}</text>
      </view>
      <view class="hd">
        <text class="grey block">完成率</text>
        <text>{{ info.percent }}</text>
      </view>
    </view>
    <view v-if="info && !showEmpty" class="list">
      <uni-table emptyText="暂无更多数据">
        <!-- 表头行 -->
        <uni-tr>
          <uni-th width="20" align="left">时间</uni-th>
          <uni-th width="20" align="left">采样数</uni-th>
          <uni-th width="20" align="left">收样数</uni-th>
          <uni-th width="20" align="left">操作</uni-th>
          <!-- <uni-th width="20" align="left">姓名</uni-th>
          <uni-th width="20" align="left">证件号</uni-th>
          <uni-th width="20" align="left">手机号</uni-th> -->
        </uni-tr>
        <!-- 表格数据行 -->
        <uni-tr v-for="(item, index) in info.sampleDetails" :key="index">
          <uni-td>{{ item.date }}</uni-td>
            <uni-td>{{ item.sampleNo }}</uni-td>
              <uni-td>{{ item.collectNo }}</uni-td>
                <uni-td><text class="link" @tap="goto('/pages/statistics/sample-detail', item)">详情</text></uni-td>
                <!-- <uni-td>{{ item.username }}</uni-td>
                  <uni-td>{{ item.idCard }}</uni-td>
                    <uni-td>{{ item.phone }}</uni-td> -->
        </uni-tr>
      </uni-table>
      <v-empty :isShow="showEmpty" text="暂无相关记录"></v-empty>
    </view>
    <v-empty :isShow="showEmpty" text="暂无相关记录"></v-empty>
  </view>
</template>
<script>
  import Config from '@/components/v-chart/column';
  import VEmpty from '@/components/v-empty/index.vue';
  import Api from '@/api/main';
  export default {
    components: {
      VEmpty
    },
    data() {
      return {
        showEmpty: false,
        config: Config,
        info: {
          // // 总采样数
          // totalSample: 100,
          // // 总收样数
          // totalCollect: 100,
          // // 完成率
          // percent: '99%',
          // sampleDetails: [
          // {
          //   date: '2021-09',
          //   // 采样数
          //   sampleNo: 100,
          //   // 收样数
          //   collectNo: 80
          // },
          // {
          //   date: '2021-09',
          //   // 采样数
          //   sampleNo: 100,
          //   // 收样数
          //   collectNo: 80,
          //   username: '张三',
          //   idCard: '1231',
          //   phone: '12312'
          // }
          // ]
        }
      };
    },
    computed: {
      chartData() {
        return {
          categories: this.info.sampleDetails.map(a => a.date),
          series: [
          {
            name: '采样数',
            data: this.info.sampleDetails.map(a => a.sampleNo)
          },
          {
            name: '收样数',
            data: this.info.sampleDetails.map(a => a.collectNo)
          }]
        };
      }
    },
    methods: {
      async getData() {
        uni.showLoading({
          title: '加载中...'
        });
        const res = await this.$http.post(Api.getSampleStatistics);
        this.info = res || {};
        console.log('info', this.info);
        this.showEmpty = !res;
        uni.hideLoading();
      },
      goto(url, item) {
        uni.navigateTo({
          url: `${url}?date=${item.date}`,
          title: item.date
        });
      }
    },
    created() {
      this.getData();
    }
  };
</script>
<style lang="scss">
  .sample {
    width: 100%;
    padding: 20rpx 40rpx;

    .chart {
      width: calc(100% - 100rpx);
      margin: 0 auto;
    }

    .collect {
      margin-top: 40rpx;
      padding: 40rpx 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 2;

      .hd {
        text-align: center;
      }

      .grey {
        color: $uni-sub-text-color;
      }
    }

    .link {
      color: $uni-color-primary;
      text-decoration: underline;
    }
  }
</style>